<template>
  <div>
    <el-dialog title="后台地址设置" v-loading="loading" element-loading-text="连接中..."
      element-loading-background="rgba(0, 0, 0, 0.5)" :visible.sync="showModal" width="80%" :before-close="handleClose">
      <el-form ref="ruleForm" :model="formModel" label-width="80px" label-position="left">
        <el-form-item label="后台IP" required>
          <el-input v-model="formModel.m_ip"></el-input>
        </el-form-item>
        <el-form-item label="后台端口" required>
          <el-input v-model="formModel.m_port"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="handleClose">取 消</el-button>
        <el-button size="mini" type="primary" @click="connectadress(1)">测试连接</el-button>
        <el-button size="mini" type="primary" @click="connectadress(2)">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script type="text/javascript">
  import axios from 'axios';
  export default {
    data() {
      return {
        formModel: {
          m_ip: this.commonV.m_ip,
          m_port: this.commonV.m_port,
        },
        loading: false
      }
    },
    watch: {

    },
    computed: {
      //显示弹框类型
      modalStatus() {
        return this.$store.state.modalStatus;
      },

      //是否显示弹框
      showModal() {
        return this.$store.state.showModal
      },
    },
    created() {

    },
    mounted() {

    },

    methods: {
      handleClose() {
        this.$store.commit('updateModalStatus', '')
        this.$store.commit('showModal', false)
      },
      //连接地址
      connectadress(type) {
        //验证端口格式
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            //验证ip地址格式
            if (!(/((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))/)
              .test(this.formModel.m_ip)) {
              this.$message({
                message: 'IP地址格式不规范',
                type: 'warning'
              });
            } else {
              if (!(/^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/).test(this
                  .formModel.m_port)) {
                this.$message({
                  message: '端口格式不规范',
                  type: 'warning'
                });
              } else {
                if (type == 1) {
                  //测试连接
                  //测试连接
                  this.loading = true
                  axios.get('http://' + this.formModel.m_ip + ":" + this.formModel.m_port + '/admin')
                    .then(res => {
                      this.$message({
                        message: '连接成功',
                        type: 'success'
                      });
                      this.loading = false
                    })
                    .catch((error) => {
                      //console.log(error.response, error.request, error.message)
                      if (error.response) {
                        var tips = error.response.data.error_description //状态值 
                        console.log(error.response.status);
                        this.$message({
                          message: '连接成功',
                          type: 'success'
                        });
                        this.loading = false
                      } else if (error.request) {
                        console.log(error.request);
                        this.$message.error('获取数据失败');
                        this.loading = false
                      } else {
                        // Something happened in setting up the request that triggered an Error
                        console.log('Error', error.message);
                        this.$message.error('获取数据失败');
                        this.loading = false
                      }
                    });
                } else if (type == 2) {
                  this.loading = true
                  localStorage.setItem("m_ip", this.formModel.m_ip)
                  localStorage.setItem("m_port", this.formModel.m_port)
                  this.loading = false
                  this.handleClose()
                  location.reload(); //页面刷新
                }
              }
            }
          } else {
            // console.log('error submit!!');
            return false;
          }
        });

      },

    },
    components: {

    }

  }

</script>
<style scoped>


</style>
